<template>
  <div class="myHeader">
    <input
      type="text"
      v-model="title"
      @keyup.enter="add"
      placeholder="请输入任务清单"
    />
  </div>
</template>
<script>
import { nanoid } from "nanoid";
export default {
  name: "myHeader",
  data() {
    return {
      title: "",
    };
  },
  methods: {
    add() {
      if (!this.title.trim()) return alert("请输入您的清单");
      const todoObj = { id: nanoid(), title: this.title, done: false };
      this.$emit('addTodos',todoObj);
      this.title = "";
    },
  },
};
</script>
<style lang="less" scoped>
.myHeader {
  width: 602px;
  input {
    box-sizing: border-box;
    width: 100%;
    height: 32px;
    outline: none;
    border-radius: 4px;
    &:focus {
      border: 1px solid skyblue;
      box-shadow: 0 0 1px 1px skyblue;
    }
  }
}
</style>